<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/6 10:24
    @Version 1.0
    @Description 获取一组元素-全选，反选
  -->
    <meta charset="UTF-8">
    <title>提取事件-复选框</title>
    <script>
        window.onload = function () {
            var oBut = document.getElementById("but1");//获取标签
            var oBut2 = document.getElementById("but2");//获取标签
            var oBut3 = document.getElementById("but3");//获取标签
            var div1 = document.getElementById("div1")
            var oCh = div1.getElementsByTagName("input");

            oBut.onclick = function () {
                for (var i = 0;i < oCh.length;i ++){
                    oCh[i].checked = true;
                }
            };
            oBut2.onclick = function () {
                for (var i = 0;i < oCh.length;i ++){
                    oCh[i].checked = false;
                }
            };

            oBut3.onclick = function () {
                for (var i = 0;i < oCh.length;i ++){
                    if ( oCh[i].checked == true){
                        oCh[i].checked = false;
                    }else{
                        oCh[i].checked = true;
                    }
                }
            };
        };
    </script>
</head>
<body>
    <input id="but1" type="button" value="全选"><br>
    <input id="but2" type="button" value="全不选"><br>
    <input id="but3" type="button" value="反选"><br>
    <div id="div1">
        <input type="checkbox" ><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
    </div>
</body>
</html>